﻿@using PagedList
@using PagedList.Mvc

@model IPagedList<Project_2._2.ViewModels.CarList_ViewModel>

@{
    ViewBag.Title = ViewBag.TieuDe;
    Layout = "~/Views/Shared/_UserLayoutPage2.cshtml";
}


@* ToolTip *@
<script type="text/javascript">

    function dotooltip(hinh) {
        document.getElementById("hinh").src = hinh;
        document.getElementById("ToolTip").style.visibility = "visible";
    };
    document.onmousemove = function (e) {
        if (e == null)//neu la IE hoac chrome
        {
            mx = event.pageX;
            my = event.pageY;
        }
        else // firefox hoac operrator
        {
            mx = e.clientX;
            my = e.clientY;
        }
        div_tt = document.getElementById("ToolTip").style;
        if (mx > 880)
        { div_tt.left = (mx - 460) + "px"; }
        else
        { div_tt.left = (mx + 10) + "px"; }
        if (my > 300)
            div_tt.top = (my - 300) + "px";
        else
            div_tt.top = (my - 100) + "px";
    }
    function hide() {
        document.getElementById("ToolTip").style.visibility = "hidden";
    };
</script>
<!-- ToolTip san pham --->
<div id="ToolTip" style="width:auto ; height:auto; border:2px solid red; position:fixed; z-index:999; border-radius:10px; visibility:hidden">
    <img id="hinh" width="450" />
</div>
@*  end ToolTip   *@

<div class="ContentLeft-child">
    <div class="ContentRight-child-head"> @ViewBag.TieuDe </div>
    <div class="ContentRight-child-logo"></div>
    <div class="ContentRight-child-body Box_sp">

        @if ( Model.Count > 0)
        {
                for (int j = 0; j < Model.Count; j++)
                {
                    if( j % 2 == 0)
                     {
                        <div class="sp">
                            <div class="sp_name">@Model[j].name</div>
                            <div>
                                <div>
                                    <img src="~/Images/Cars/@Model[j].hinh" style="cursor:pointer" width="160" height="110" onmouseover="dotooltip('/Images/Cars/@Model[j].hinh')" onmouseout="hide()" />
                                </div>
                                <div class="sp_detail" >
                                    Hiệu : @Model[j].THieu<br />
                                    Dòng xe: Civic<br />
                                    Đời xe : @Model[j].DoiXe <br />
                                    Kiểu xe : @Model[j].Loai<br />
                                    Màu xe : @Model[j].Color<br />
                                    Giá thuê :<span> @string.Format("{0:#,### đ}", @Model[j].Gia)</span><br />

                                </div>
                                <div style="clear:right"></div>
                                <div style="text-align:center; margin-bottom:10px">
                                    <input type="button" value="Đặt Xe" class="Button" style=" margin-top:5px" />
                                    <a href="@Url.Action("ChiTiet", "Xe", new {  id = Model[j].id})" style="font-size:13px; text-decoration:none; padding-top:5px" class="Button">Xem Chi tiết</a>
                                </div>
                            </div>
                        </div>
                     }
                    else
                     {
                        <div class="sp-left">
                            <div class="sp_name">@Model[j].name</div>
                            <div>
                                <div>
                                    <img src="~/Images/Cars/@Model[j].hinh" style="cursor:pointer" width="160" height="110" onmouseover="dotooltip('/Images/Cars/@Model[j].hinh')" onmouseout="    hide()" />
                                </div>
                                <div class="sp_detail">
                                    Hiệu : @Model[j].THieu<br />
                                    Dòng xe: Civic<br />
                                    Đời xe : @Model[j].DoiXe <br />
                                    Kiểu xe : @Model[j].Loai<br />
                                    Màu xe : @Model[j].Color<br />
                                    Giá thuê :<span> @string.Format("{0:#,### đ}", Model[j].Gia) </span><br />

                                </div>
                                <div style="clear:right"></div>
                                <div style="text-align:center; margin-bottom:10px">
                                    <input type="button" value="Đặt Xe" class="Button" style=" margin-top:5px" />
                                    <a href="@Url.Action("ChiTiet", "Xe", new {  id = Model[j].id})" style="font-size:13px; text-decoration:none; margin-top:5px" class="Button">Xem Chi tiết</a>
                                </div>
                            </div>
                        </div>
             <div style="clear:both"></div>
                    }
                }
                <div style="clear:both"></div>
                 <table cellpadding="0" cellspacing="0" style=" border-top:none; margin:5px 0;" align="right" >
               <tr>
                   
                   <td style="width:65px; text-align:right; font-weight:bold;padding-top:3px "> 
                       <span style="border: 1px solid #808080; border-right: none; padding: 7.5px 15px; margin-top: 9px; border-radius: 4px 0 0 4px; background-color: #428bca; color:#ffffff"> Trang </span></td>
                   <td style="width:auto" >
                       @if (ViewBag.Key == null && ViewBag.SBy == null)
                       {
                           @Html.PagedListPager(Model, page => Url.Action("DichVu", new { page, rd = ViewBag.record , id = ViewBag.id }), new PagedListRenderOptions() { LinkToFirstPageFormat = "<<", LinkToPreviousPageFormat = " < ", LinkToNextPageFormat = " > ", LinkToLastPageFormat = ">>" })
                        }
                       else
                       {
                           @Html.PagedListPager(Model, page => Url.Action("Default", new { page, rd = ViewBag.record,key =ViewBag.Key, SBy = ViewBag.SBy, SType = ViewBag.SType }), new PagedListRenderOptions() { LinkToFirstPageFormat = "<<", LinkToPreviousPageFormat = " < ", LinkToNextPageFormat = " > ", LinkToLastPageFormat = ">>" })
                        }
                   </td>
                   <td style="width :7px"></td>
               </tr>
            </table>
            
            <div style="clear:both"></div>
        }
        else
        {
            <span style=" margin:20px 20px; padding:30px 0 ; line-height:50px">Danh sách Xe đang được cập nhật. Xin Quý Khách Vui Lòng quay lại sau !... </span>
        }

    </div>
</div>
